<template>
	<view class="content">
		<view class="top">
			<view class="topSearch" :style="{'background':colorConfirm}">
				<view class="status_bar"></view>
				<view class="top_cont">
					<image class="imglogo" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/paimai.png" mode=""></image>
					<view class="top_lrft" @click="goSearch">
						<image class="iconSearch" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/sear.png" mode=""></image>
						<view class="searchtxt">搜索商品名称</view>
					</view>
				</view>
			</view>
		</view>
		<view class="banner">
			<view class="top_banner">
				<swiper class="swiper_index" :autoplay="autoplay" :interval="interval" :duration="duration" :indicator-dots="true"
				 circular>
					<swiper-item v-for="(item,index) in indexDatas.banner" :key="index">
						<view class="swiper-item">
							<image class="swiper_pic" :src="item.pic" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="index_notice">
				<view class="notice_left">
					<image class="icon_notice" :src="require('../../../static/new_image/icon_home_news@3x.png')" mode=""></image>
					<view class="notice_txt">
						<swiper class="swiper_notice" :autoplay="true" :interval="5000" :duration="1000" circular>
							<swiper-item v-for="(item,index) in indexDatas.categorys">
								<view class="swiper-item">{{item.info}}</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="notice_fr iconfont">&#xe601;</view>
			</view>
		</view>

		<view class="cont">
			<view class="group_list">
				<view class="list" v-for="(item,index) in auctionList" :key="index">
					<view class="list_top">
						<view class="list_title">
							<view class="title_name ellipsis">{{item.title}}</view>
							<view class="list_line"></view>
							<view class="list_date list_curr">{{item.startTime}} - {{item.endTime}}</view>
						</view>
						<view class="list_more" @click="goMore(item)">
							<text>更多</text>
							<text class="iconfont icon">&#xe653;</text>
						</view>
					</view>
					<view class="list_goods">
						<view class="list_pic_group" @click="goMore(item)">
							<image class="list_goods_pic" :src="item.image" mode="aspectFill"></image>
						</view>
						<!-- <view class="goods" v-for="(lItem,lIndex) in item.yxAuctionRecordDto" @click="goAuction(lItem)">
								<view class="goods_image">
									<image class="pic" :src="lItem.yxAuctionProductDto.image" mode="aspectFill"></image>
								</view>
								<view class="goods_name ellipsis">{{lItem.yxAuctionProductDto.title}}</view>
								<view class="goods_price">
									<view class="sign iconfont">&#xe604;</view>
									<view class="price">{{lItem.price}}</view>
								</view>
							</view> -->
					</view>
				</view>
			</view>
			<!-- <view class="index_title">
					<image class="index_hot" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/homehot.png" mode=""></image>
					<view class="hot_txt">热门推荐</view>
				</view>
				<view class="product_cont">
					<view class="product_list" v-for="(item,index) in indexDatas.bastList" :key="index" @click="goGoods(item)">
						<view class="product_image">
							<image class="product_pic" :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="product_name ellipsis">{{item.storeName}}</view>
						<view class="product_bot">
							<view class="product_price">
								<view class="sign iconfont">&#xe604;</view>
								<view class="price">{{item.price}}</view>
							</view>
							<view class="product_sale">已售:{{item.sales}}</view>
						</view>
					</view>
				</view> -->
		</view>

	</view>
</template>

<script>
	import api from "../../../common/api/api.js"
	export default {
		data() {
			return {
				autoplay: true,
				interval: 2000,
				duration: 500,
				auctionList: [],
				indexDatas: {},
				colorConfirm: 'transparent',
			}
		},
		onLoad(options) {
			console.log("00000--",api)
		
			if (Object.keys(options).length != 0) {
				let ReferralCode = options.ReferralCode;
				uni.setStorageSync('ReferralCode',ReferralCode)
			}
			
			
			let that = this;
			that.getList();
			that.getIndexInfo();
			console.log(that.cacheHelper.isLogin(), "that.cacheHelper.isLogin()===")
			
			uni.$on('login', function(data) {
				that.cacheHelper.isLogin()
				that.cacheHelper.updateUserInfo()
				that.getList()
				that.getIndexInfo();
			})
			setInterval(function() {
				that.getList()
			}, 3600000)
		},
		onUnload() {
			uni.$off('login', function() {});
		},
		onPullDownRefresh() {
			console.log('refresh');
			let that = this;
			that.getList()
			that.getIndexInfo()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 商品详情页
			goGoods: function(item) {
				if (this.cacheHelper.isLoginOnclick) {
					uni.navigateTo({
						url: 'goodsDetail/goodsDetail?id=' + item.id,
					});
				}
			},
			// 拍卖更多
			goMore: function(item) {
				let timeId = item.id;
				let title = item.title;
				let endTime = item.endTime;
				let startTime = item.startTime;
				// uni.navigateTo({
				// 	url:"auctionList/auctionList"
				// })
				uni.navigateTo({
					url: `auctionList/auctionList?timeId=${timeId}&title=${title}&endTime=${endTime}&startTime=${startTime}`
				});
			},
			//  拍卖详情
			goAuction: function(item) {
				uni.navigateTo({
					url: 'auctionDetail/auctionDetail?id=' + item.id,
				});
			},
			// 搜索
			goSearch: function() {
				uni.navigateTo({
					url: 'searchAuction/searchAuction'
				});
			},
			// 获取列表
			getList: function() {
				api.indexHomeList().then(res => {
					// console.log(res,"---------")
					this.auctionList = res.data;
				})
			},
			// 获取轮播
			getIndexInfo: function() {
				api.indexBannerInfo().then(res => {
					console.log(res, "======")
					this.indexDatas = res.data;
				})
			},
			// 轮播详情
			goBanner: function(item) {
				uni.navigateTo({
					url: 'bannerDetail/bannerDetail?id=' + item.id,
				});
			},
		},
		// onPageScroll: function(e) {
		// 	let that = this;
		// 	let scrollTop = e.scrollTop;
		// 	if (scrollTop > 80) {
		// 		that.colorConfirm = '#E42221';
		// 	} else {
		// 		that.colorConfirm = 'transparent';
		// 	}
		// }
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		font-family: 'PingFang SC';
		background: #F5F5F5;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
		
	}

	.top {
		width: 100%;
		box-sizing: border-box;
		height: 300rpx;
		background: #E42221;
		border-radius: 0 0 30rpx 30rpx;
        padding-top: 70rpx;
		.topSearch {
			width: 100%;
			box-sizing: border-box;
			background: #E42221;
			position: fixed;
			top: 60rpx;
			left: 0;
			z-index: 99;
			padding: 20rpx;

			.top_cont {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				color: #FFFFFF;

				.imglogo {
					width: 120rpx;
					height: 47rpx;
				}

				.top_lrft {
					width: 566rpx;
					box-sizing: border-box;
					padding: 0 30rpx;
					height: 54rpx;
					background: rgba(245, 245, 245, 0.71);
					border-radius: 48rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.iconSearch {
						width: 24rpx;
						height: 24rpx;
					}

					.searchtxt {
						width: calc(100% - 24rpx);
						box-sizing: border-box;
						padding-left: 14rpx;
					}

				}
			}
		}
	}

	.banner {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 0 20rpx;
		height: 240rpx;
		position: relative;

		.top_banner {
			width: 100%;
			height: 142rpx;
			box-sizing: border-box;
			position: relative;

			.swiper_index {
				width: 100%;
				height: 280rpx;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				top: -142rpx;
				z-index: 66;

				.swiper-item {
					width: 100%;
					height: 100%;

					.swiper_pic {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}
			}
		}

		.index_notice {
			width: 100%;
			box-sizing: border-box;
			padding: 16rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #212121;

			.notice_fr {
				width: 40rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #A88D63;
			}

			.notice_left {
				width: calc(100% - 40rpx);
				box-sizing: border-box;
				padding-right: 15rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.icon_notice {
					width: 100rpx;
					height: 31rpx;
				}

				.notice_txt {
					width: calc(100% - 100rpx);
					box-sizing: border-box;
					padding-left: 30rpx;

					.swiper_notice {
						width: 100%;
						height: 62rpx;
						line-height: 62rpx;

						.swiper-item {
							width: 100%;
							line-height: 62rpx;
						}
					}

				}

			}

		}

	}

	.cont {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 20rpx;

		.group_list {
			width: 100%;
			box-sizing: border-box;

			.list {
				width: 100%;
				box-sizing: border-box;
				background: #FFFFFF;
				margin-bottom: 26rpx;
				border-radius: 16rpx;

				.list_top {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 22rpx;
					color: #A88D63;

					// padding-right: 18rpx;
					.list_more {
						width: 100rpx;
						box-sizing: border-box;
						text-align: right;

						.icon {
							font-size: 22rpx;
							color: #707070;
							// padding-left: 10rpx;
						}
					}

					.list_title {
						// padding: 0 17rpx 0 17rpx;
						// width: calc(100% - 90rpx);
						max-width: calc(100% - 100rpx);
						min-width: calc(100% - 300rpx);
						box-sizing: border-box;
						padding: 0 10rpx;
						line-height: 58rpx;
						font-size: 30rpx;
						color: #704912;
						border-radius: 16rpx 0 40rpx 0;
						background: linear-gradient(to right, #EDC372, #FFF4DA);
						display: flex;
						align-items: center;
						justify-content: flex-start;

						.list_date {
							width: 220rpx;
							box-sizing: border-box;
							color: #A88D63;
						}

						.list_curr {
							color: #E42221;
						}

						.list_line {
							width: 2rpx;
							height: 22rpx;
							background: #A88D63;
							margin: 0 11rpx;
						}

						.title_name {
							width: calc(100% - 244rpx);
							box-sizing: border-box;
						}
					}
				}

				.list_goods {
					width: 100%;
					box-sizing: border-box;
					// padding: 24rpx 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 26rpx;
					color: #212121;
					flex-flow: wrap;

					.list_pic_group {
						width: 100%;
						box-sizing: border-box;
						height: 280rpx;

						.list_goods_pic {
							width: 100%;
							height: 100%;
							border-radius: 0 0 16rpx 16rpx;
						}
					}

					.goods {
						width: 216rpx;
						box-sizing: border-box;

						.goods_image {
							width: 216rpx;
							height: 216rpx;
							background: #F0F0F0;
							border-radius: 16rpx;

							.pic {
								width: 100%;
								height: 100%;
								vertical-align: middle;
								border-radius: 16rpx;
							}
						}

						.goods_name {
							width: 100%;
							box-sizing: border-box;
							line-height: 40rpx;
							padding: 16rpx 0;
						}

						.goods_price {
							width: 100%;
							box-sizing: border-box;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							font-size: 30rpx;
							color: #E42221;

							.sign {
								font-size: 32rpx;
								color: #FFDA71;
							}
						}

					}

					&::after {
						content: "";
						width: 216rpx;
						border: 1rpx solid transparent;
					}
				}

			}
		}

		.index_title {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 36rpx;
			color: #333333;
			font-weight: 600;
			line-height: 60rpx;

			.index_hot {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		.product_cont {
			width: 100%;
			box-sizing: border-box;
			padding: 10rpx 0 80rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-flow: wrap;

			.product_list {
				width: 340rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 8rpx;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;

				.product_image {
					width: 100%;
					height: 340rpx;
					border-radius: 8rpx 8rpx 0 0;

					.product_pic {
						width: 100%;
						height: 100%;
						border-radius: 8rpx 8rpx 0 0;
					}
				}

				.product_name {
					width: 100%;
					box-sizing: border-box;
					padding: 16rpx;
					font-size: 28rpx;
					color: #212121;
					line-height: 40rpx;
				}

				.product_bot {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 40rpx;
					padding: 0 16rpx;

					.product_sale {
						font-size: 22rpx;
						color: #666666;
					}

					.product_price {
						font-size: 36rpx;
						color: #E42221;
						display: flex;
						align-items: center;

						.sign {
							font-size: 32rpx;
							color: #FFDA71;
						}
					}


				}
			}
		}

	}

	.load {
		position: fixed;
		left: 15rpx;
		bottom: 15rpx;
		z-index: 999999;
	}
</style>
